<template>
  <div class="submittask">
    <div
      class="tabs-box"
      v-if="!isfull"
    >
      <div
        class="tabs"
        @click="goSubmit(item.task_id,item.task_queue_id)"
        v-for="(item,index) in list"
        :key="index"
      >
        <div>
          <img
            src="../../assets/images/logo1024.jpg"
            alt=""
          >
          <div>
            <p>{{item.task_title}} </p>
            <p>{{item.start_time}}
              <span style="color: red;font-size: 12px"  v-if="item.task_queue_status == 1" >[进行中]</span>
              <span style="color: red;font-size: 12px" v-else-if="item.task_queue_status == 2" >[审核中]</span>
              <span style="color: red;font-size: 12px" v-else-if="item.task_queue_status == 3" >[审核通过]</span>
              <span style="color: red;font-size: 12px" v-else-if="item.task_queue_status == 4" >[审核失败]</span>
              <span style="color: red;font-size: 12px" v-else-if="item.task_queue_status == 5" >[重新审核中]</span>
              <span style="color: red;font-size: 12px" v-else-if="item.task_queue_status == 6" >[二次审核失败关闭]</span>
              <!--1=进行中待审核 2=审核中 3=审核通过 4=审核失败重新上传  5=重新审核 6=审核失败关闭-->
              <span style="color: red;font-size: 12px" >￥{{item.commission}}</span>
            </p>

          </div>
        </div>
        <div><i class="icon iconfont icon-xiangyou"></i></div>
      </div>
    </div>
    <div
      class="null"
      v-if="isfull"
    >
      <img
        src="../../assets/images/nullData.png"
        alt=""
      >
      <p>没有数据</p>
    </div>
    <div class="text">
      <h3>任务提交规则：</h3>
      <P>1、请仔细认真的填写，以免造成审核不通过。</P>
    </div>
    <!--<div class="pyq">-->
      <!--<img src="../../assets/images/pengyouquan.jpg" alt="">-->
    <!--</div>-->
  </div>
</template>
<script>
import { submitTaskList,getMyReceiveTask } from "../../api/user";
export default {
  data() {
    return {
      list: [],
      isfull: false,
      type:'',
    };
  },
  methods: {
    goSubmit(task_id, task_queue_id) {
      this.$router.push({
        path: "/submit",
        query: {
          task_id: task_id,
          task_queue_id: task_queue_id
        }
      });
    },
    getData() {
      this.type = this.$route.query.type

      if(this.type==1){
        getMyReceiveTask({type:this.type}).then(res => {
          console.log(res)
          this.list = res.data.list;
          if (res.data.count == 0) {
            this.isfull = true;
          }
        });
      }else{
        getMyReceiveTask().then(res => {
          console.log(res)
          this.list = res.data.list;
          if (res.data.count == 0) {
            this.isfull = true;
          }
        });
      }

    }

  },
  created() {
    this.getData();
  }
};
</script>
<style lang="scss">
.submittask {
  width: 100%;
  padding-bottom: 48px;
  background-color: #f5f5f5;
  header {
    color: #fff;
  }
  .pyq {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .null {
    // position: fixed;
    // left: 50%;
    // top: 60%;
    // transform: translate(-50%, -80%);
    text-align: center;
    p {
      padding-top: 8px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      color: #999;
    }
  }
  .tabs-box {
    width: 100%;

    .tabs {
      margin-top: 10px;
      width: 100%;
      height: 48px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      div:first-child {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      img {
        margin-right: 10px;
        width: 25px;
        vertical-align: middle;
      }
      span {
        padding-left: 10px;
        font-size: 16px;
        vertical-align: middle;
      }
      i {
        vertical-align: middle;
        margin-left: 10px;
        font-size: 16px;
      }
      .num {
        color: #f44;
      }
    }
  }
  .text {
    span {
      color: #e71434;
    }
    padding: 15px;
    p {
      padding: 3px;
    }
    h3 {
      font-size: 14px;
      font-weight: 500;
    }
  }
}
</style>


